﻿@{
    ViewBag.Title = "RepeatList";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Repeat List</h2>

<div ng-app>
    <div ng-controller='StudentListController'>
      <ul>
        <li ng-repeat='student in students'>
          <a ng-href='/student/view/{{student.id}}'>{{student.name}}</a>
        </li>
      </ul>
      <br />
      <button ng-click="insertTom()">Insert Tom</button>
    </div>
</div>

<script type="text/javascript">
    var students = [{ name: 'Mary Contrary', id: '1' },
        { name: 'Jack Sprat', id: '2' },
        { name: 'Jill Hill', id: '3' }];

    function StudentListController($scope) {
        $scope.students = students;

        $scope.insertTom = function () {
            $scope.students.splice(4, 0, { name: 'Tom Thumb', id: '4' });
        };
    }
</script>
